<template>
    <!-- 观点分析 -->
    <view class='viewpoint_box'>
        <view class='title' :class='{title_padding: title=="新闻观点分析"}'>{{title}}</view>
        <pie :width='charts_width' :pie_data='pie_data' :id="'viewpoint_pie'+index" :dataLabel='true'></pie>
        <view class='viewpoint_list'>
            <view v-for='(item,index) in pie_data' :key='index'>
                <view :style='{background:item.color}'></view>
                {{item.title}}
            </view>
        </view>
    </view>
</template>

<script>

    import pie from './charts/pie.vue'
    import color from './charts/color.js'

    export default {
        props: {
            title: String,
            index: Number,
            content: Array,
        },
        components: {
           pie,
        },
        data() {
            return {
                color,
                charts_width: 0,
                pie_data: [],
            }
        },
        async mounted() {
            console.log(this.content)
            if(this.content) {
                this.content.forEach((val,i) => {
                    let obj = {
                        name: val.source,
                        data: val.count,
                        title: val.title,
                        color: this.color[i]
                    }
                    this.pie_data.push(obj)
                });
            }
            
           this.charts_width = await this.$getDomInfo(".viewpoint_box","width");
        }
    }
</script>

<style lang="scss" scoped>
    .viewpoint_box {
        width: 100%;
        font-size: 24upx;
        color: #333;
        .title {
            width: 100%;
            font-weight: 600;
            padding: 30upx 0;
        }
        .title_padding {
            padding-top: 0;
        }
        .viewpoint_list {
            width: 100%;
            >view {
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: #666;
                margin-bottom: 30upx;
                position: relative;
                padding-left: 30upx;
                box-sizing: border-box;
                &:nth-last-child(1) {
                    margin: 0;
                }
                >view {
                    width: 12upx;
                    height: 12upx;
                    border-radius: 50%;
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                }
            }
        }
    }
</style>